<script setup>
import { ref } from 'vue'

const props = defineProps(['options'])
const emit = defineEmits(['change'])

const change = (type, item) => {
  const options = props.options

  if (type == 'fixed') {
    options.splice(options.indexOf(item), 1)
    const leftLastIndex = options.findLastIndex((val) => val.fixed == 'left')
    const rightLastIndex = options.findLastIndex((val) => val.fixed == 'right')

    if (item.fixed == 'left') {
      options.splice(leftLastIndex + 1, 0, item)
    } else if (item.fixed == 'right') {
      options.splice(rightLastIndex == -1 ? options.length : rightLastIndex + 1, 0, item)
    } else {
      options.splice(leftLastIndex + 1, 0, item)
    }
  }

  emit('change', options)
}

const box = ref()

let cur = null

function onDragstart(item) {
  cur = item
}

function onDragover(e) {
  e.preventDefault()
  e.currentTarget.classList.add('hover')
}

function onDragleave(e) {
  e.currentTarget.classList.remove('hover')
}

function onDrop(e, item) {
  e.preventDefault()

  const options = props.options
  if (!item.fixed) {
    options.splice(options.indexOf(cur), 1)
    options.splice(options.indexOf(item), 0, cur)

    emit('change', options)
  }

  e.currentTarget.classList.remove('hover')
}
</script>

<template>
  <el-popover trigger="click" width="500">
    <template #reference>
      <el-button icon="Tools" type="info" circle size="small" />
    </template>
    <template #default>
      <div ref="box" class="box">
        <table>
          <thead>
            <tr>
              <th>列名</th>
              <th>显隐</th>
              <th>宽度</th>
              <th>固定</th>
              <th>合计</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="item in options"
              :key="item.value"
              :draggable="item.fixed ? 'false' : 'true'"
              @dragstart.stop="onDragstart(item)"
              @dragover="onDragover"
              @dragleave="onDragleave"
              @drop="onDrop($event, item)"
            >
              <td style="text-align: left">
                <el-icon v-if="!item.fixed" :size="10">
                  <Rank />
                </el-icon>
                {{ item.label }}
              </td>
              <td style="width: 50px">
                <el-switch v-model="item.show" size="small" @change="change"></el-switch>
              </td>
              <td style="width: 100px">
                <el-input v-model="item.width" @change="change"></el-input>
              </td>
              <td style="width: 100px">
                <el-select v-model="item.fixed" :append-to="box" @change="change('fixed', item)">
                  <el-option label="默认" :value="false" />
                  <el-option label="左" value="left" />
                  <el-option label="右" value="right" />
                </el-select>
              </td>
              <td style="width: 50px">
                <el-switch
                  v-if="item.type == 'number'"
                  v-model="item.total"
                  size="small"
                  @change="change"
                ></el-switch>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>
  </el-popover>
</template>

<style scoped>
.box {
  max-height: 600px;
  overflow: auto;
  user-select: none;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: none;
}

th {
  padding: 8px 10px;
}

th,
td {
  white-space: pre;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 5px 10px;
}

.hover {
  border-top: 2px solid var(--el-color-primary);
}
</style>
